// @ 516
// _(:з」∠)_

define([], function() {
    'use strict';

    let farmlandStation = document.querySelector(".leftMain_cont .farmlandStation"),
        farmlandStationCont = farmlandStation.querySelector(".item_cont");

    RST.basic( NetWorkPath + "/device/getWeatherDeviceByAreaName?areaName=", "", function( result ) {
        let listLi = ``, fls_newDatas = [],
            data = result.data.sort( objCompare( "areaName" ) );

        for ( let x = 0; x < data.length; x++ ) {
            listLi += `<li class="farmlandStation_item" value="${ data[x].deviceName }">
                            <h value="${ data[x].deviceName }">${ data[x].areaName } - ${ data[x].deviceName }</h>
                        </li>`;

            fls_newDatas.push({
                name: data[x].deviceName,
                lat: data[x].detail[0].deviceLat,
                lng: data[x].detail[0].deviceLon
            });
        }

        for ( let x = 0; x < fls_newDatas.length; x++ ) {
            let Albers = proj4( MC.China_Albers  ).forward([ fls_newDatas[x].lng, fls_newDatas[x].lat ]),
                AlbersLatLng = MC.customCRS.unproject( L.point( Albers[0], Albers[1] ) );
            
            fls_newDatas[x].lat = AlbersLatLng.lat;
            fls_newDatas[x].lng = AlbersLatLng.lng;
        }

        removeAllCommon();
        MC.mapEvent.closeAllLayer();
        MC.mapEvent.drawFarmlandStations( fls_newDatas, function( param ) {
            queryStationInfo( param );
        });

        let farmlandStationView = `<ul class="farmlandStation_list"> ${ listLi } </ul>`;
        farmlandStationCont.insertAdjacentHTML("beforeEnd", farmlandStationView);

        farmlandStationCont.addEventListener("click", function(e) {
            if ( e.target.nodeName === "H" && e.target.parentNode.nodeName === "LI" ) {
                let flsd = document.querySelector(".farmlandStationDetilas");
                if ( flsd ) flsd.remove();

                if ( e.target.parentNode.hasClass("select") ) {
                    e.target.parentNode.removeAllClass("select");

                    let flsd = document.querySelector(".farmlandStationDetilas");
                    if ( flsd ) flsd.remove();
                } else {
                    e.target.parentNode.removeAllClass("select");
                    e.target.parentNode.addClass("select");
                    
                    
                    for ( let x = 0; x < MC.mapMarker.length; x++ ) {
                        if ( MC.mapMarker[x].options.title == e.target.parentNode.getAttribute("value") ) {
                            MC.mapMarker[x].openPopup();
                        }
                    }
                    queryStationInfo({ title: e.target.getAttribute("value") });
                }
            }
        }, false);

        let leftNavItem = document.querySelectorAll(".leftMain_nav .nav_item");
        for ( let x = 0; x < leftNavItem.length; x++ ) {
            leftNavItem[x].addEventListener( "click", function( e ) {
                if ( leftNavItem[x].getAttribute("title") == "小气候站" && leftNavItem[x].hasClass("select") ) {
                    removeAllCommon();
                    MC.mapEvent.closeAllLayer();
                    MC.mapEvent.drawFarmlandStations( fls_newDatas, function( param ) {
                        queryStationInfo( param );
                    });
                }
            }, false);
        }
    });


    function queryStationInfo( param ) {
        let main = document.querySelector(".main"),
            flsd = main.querySelector(".farmlandStationDetilas"),
            stationHtml = `<div class="farmlandStationDetilas">
                                <div class="flsd_head">
                                    <span class="flsd_close"></span>
                                    <h>${ param.sourceTarget.options.detail.name }</h>
                                    <span class="flsd_close" onclick="closeWindow()">
                                        <img src="../image/icon/close.png">
                                    </span>
                                </div>
                                <div class="flsd_cont">
                                    <ul class="flsd_fixed">
                                        <li class="select"> <a href="#">天气分析</a> </li>
                                        <li> <a href="#">智能预测</a> </li>
                                        <li> <a href="#">基础数据</a> </li>
                                    </ul>
                                    <div class="flsd_list">
                                        <div class="flsd_item" id="weatherAnalysis">
                                            <div class="flsd_item_head">天气分析</div>
                                            <div class="flsd_item_cont">
                                                <ul class="prediction">
                                                    <li>
                                                        <p>7天降水预测</p>
                                                        <span>0.80mm</span>
                                                    </li>
                                                    <li>
                                                        <p>7天蒸发蒸腾预测</p>
                                                        <span>12.59mm</span>
                                                    </li>
                                                </ul>
                                                <ul class="analysis">
                                                    <li>
                                                        <p>11-18</p>
                                                        <img src="" />
                                                        <span>12°</span>
                                                    </li>
                                                    <li>
                                                        <p>11-19</p>
                                                        <img src="" />
                                                        <span>14°</span>
                                                    </li>
                                                    <li>
                                                        <p>11-20</p>
                                                        <img src="" />
                                                        <span>14°</span>
                                                    </li>
                                                    <li>
                                                        <p>11-21</p>
                                                        <img src="" />
                                                        <span>12°</span>
                                                    </li>
                                                    <li>
                                                        <p>11-22</p>
                                                        <img src="" />
                                                        <span>12°</span>
                                                    </li>
                                                    <li>
                                                        <p>11-23</p>
                                                        <img src="" />
                                                        <span>14°</span>
                                                    </li>
                                                    <li>
                                                        <p>11-24</p>
                                                        <img src="" />
                                                        <span>12°</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="flsd_item" id="intelligentPrediction">
                                            <div class="flsd_item_head">智能预测</div>
                                            <div class="flsd_item_cont">
                                                <ul class="itpd_list">
                                                    <li> <p>根系深度</p> <span>20.00CM</span> </li>
                                                    <li> <p>储水量</p> <span>22.85mm</span> </li>
                                                    <li> <p>当前耗水</p> <span>-0.07mm</span> </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="flsd_item" id="basicData">
                                            <div class="flsd_item_head">基础数据</div>
                                            <div class="flsd_item_cont">
                                                <ul class="bsd_list">
                                                    <li> <p>9.56°</p> <span>空气温度</span> </li>
                                                    <li> <p>0.00mm</p> <span>一小时内降雨</span> </li>
                                                    <li> <p>1.41m/s</p> <span>西北风</span> </li>
                                                </ul>
                                                <ul class="bsd_top_list">
                                                    <li> <p>相对湿度</p> <span>0.00%RH</span> </li>
                                                    <li> <p>大气压强</p> <span>1020.00hPa</span> </li>
                                                    <li> <p>太阳辐射</p> <span>202.29W/㎡</span> </li>
                                                    <li> <p>累计太阳辐射量</p> <span>2.02MJ/㎡</span> </li>
                                                    <li> <p>下部空气温度</p> <span>9.33℃</span> </li>
                                                    <li> <p>下部相对湿度</p> <span>84.78%RH</span> </li>
                                                </ul>
                                                <ul class="bsd_bottom_list">
                                                
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

        if ( flsd ) flsd.remove();
        main.insertAdjacentHTML("beforeEnd", stationHtml);
    }

    function removeAllCommon() {        
        // 隐藏高级设置
        let disEvent = document.querySelector(".disaster_box .item_child_list span.select");
        if ( disEvent ) disEvent.click();

        let meteorEvent = document.querySelector(".meteor_list .meteor_child_item .item_set.select");
        if ( meteorEvent ) meteorEvent.click();

        // 移除右侧弹窗
        let rightPanel = document.querySelector(".rightPanel");
        if ( rightPanel ) rightPanel.remove();

        // 移除时间轴
        let timeLine = document.querySelector(".timeLine");
        if ( timeLine ) timeLine.remove();

        // 移除图例
        let legend = document.querySelector(".legend");
        if ( legend ) legend.remove();

        // 移除标题
        let title = document.querySelector(".title");
        if ( title ) title.remove();
    }    
});

function closeWindow(){
    let main = document.querySelector(".main"),
        flsd = main.querySelector(".farmlandStationDetilas");
        $(".farmlandStationDetilas").hide();
        flsd.innerHtml = "";
}